<template>
    <div class="out_box">
        <headers />

        <div class="title_box">
            <p class="title">新闻报道</p>
            <p class="desc">时时关注报道让 挖矿更快人一步</p>
        </div>
        <div class="content_box">
            <div class="list">
                <div class="img_box">
                    <img class="img" src="@assets/imgs/common/imgs.jpg" />
                </div>
                <div class="text_box">
                    <p class="title overflow_1">笑脸矿业挖出比特币减半后的第一个区块奖励!</p>
                    <p class="title_sub">金色财经  2020.05.12</p>
                    <p class="desc overflow_2">北京时间5月12日3点23分43秒，比特币区块链网络630000高度区块被挖出，比特币区块奖励由12.5枚比特币降为6.25枚比特币。据悉，减半后第一个区块奖励是由比笑脸矿业接入AntPool的矿机算力挖出。笑脸矿业!</p>
                </div>
            </div>
            <div class="more">
                <v-button class="btn">点击加载更多</v-button>
            </div>
        </div>
        
        <footers />
    </div>
</template>

<script>
    import Headers from '@components/header/header.vue';
    import Footers from '@components/footer/footer.vue';

    export default {
        name: "News",
        components: {
            Headers,
            Footers
        },
        data: function() {
            return {
                
            }
        },
        computed: {
        },
        methods: {
        },
        mounted: function() {
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .title_box{
        padding: 30px;
        text-align: center;
        background-color: @theme_bg;
        .title{
            font-size: 26px;
        }
        .desc{
            margin-top: 10px;
            color: #AAA;
        }
    }
    .content_box{
        width: 80%;
        min-width: 800px;
        margin: 30px auto;
        background-color: @theme_bg;
        .list{
            .flex_row_wrap;
            padding: 20px;
        }
        .img_box{
            width: 25%;
            min-width: 200px;
        }
        .text_box{
            flex: 4;
            padding-left: 30px;
            .title{
                padding: 10px 0;
                font-size: 24px;
            }
            .title_sub{
                margin-bottom: 10px;
                color: #AAA;
            }
            .desc{
                font-size: 16px;
            }
        }
        .more{
            padding: 40px 0;
            text-align: center;
            .btn{
                padding: 10px 20px;
                font-size: 16px;
                border-radius: 34px;
            }
        }
    }
</style>
